<template>
  <div>
    <div class="mu_box">
      <el-form
        class="multiple_form"
        label-position="top"
        :model="form"
        ref="formName"
        :rules="rules"
        label-width="80px"
        :inline="false"
        size="normal"
      >
        <el-form-item label="模拟名称" prop="simulationName">
          <el-input
            :disabled="isEditAdd"
            v-model="form.simulationName"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="时间间隔(ms)" prop="timeInterval">
          <el-input
            size="small"
            placeholder="请输入内容"
            v-model="form.timeInterval"
          >
            <template slot="append"
              ><span @click="showTimeEmpty" class="time_title_arr"
                >高级配置
                <!-- el-icon-arrow-up -->
                <span
                  :class="isTime ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"
                  style="font-size: 12px"
                ></span
              ></span>
            </template>
          </el-input>
        </el-form-item>
        <el-collapse-transition>
          <div v-show="isTime" class="time_stamp_show">
            <el-form-item label="事件时间戳">
              <div class="data_picker">
                <Datepicker
                  style="width: 100%"
                  v-on:picked="picked"
                  v-model="form.startTimestamp"
                ></Datepicker>

                <div class="line"></div>
                <Datepicker
                  style="width: 100%"
                  v-on:picked="picked"
                  v-model="form.endTimestamp"
                ></Datepicker>
              </div>
            </el-form-item>
            <el-form-item label="事件编号" prop="noOfEvents">
              <el-input
                size="small"
                placeholder="请输入内容"
                v-model="form.noOfEvents"
              >
              </el-input>
            </el-form-item>
          </div>
        </el-collapse-transition>

        <el-form-item label="描述">
          <el-input
            type="textarea"
            :rows="4"
            size="small"
            placeholder="简单的填写对模拟的描述500字以内"
            v-model="form.description"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <!-- Analog source -->
      <AnalogSourceList
        @handleStrEdit="handleStrEdit"
        @handleStrDel="handleStrDel"
        :list="AnalogSourceObj"
      ></AnalogSourceList>
      <div class="add_simulation" @click="handleAnalogSource">
        <div class="el-icon-circle-plus-outline"></div>
        <div>添加模拟源</div>
      </div>
    </div>
    <!-- 模拟源表单 -->

    <!-- 添加多例模拟 -->
    <AddMultipleDw
      @handleDelSiddhiType="handleDelSiddhiType"
      :index="index"
      ref="AddMultipleDw"
      @onSubmit="onSubmit"
      :drawer.sync="drawer"
      :AnalogSourceObj="AnalogSourceObj"
      @handleDel="handleDel"
    ></AddMultipleDw>
    <div class="btns">
      <el-button size="small" @click="$emit('handleCloes')">取消</el-button>
      <el-button
        size="small"
        type="primary"
        @click="handleSub"
        :loading="btnLoading"
        >保存</el-button
      >
    </div>
  </div>
</template>

<script>
import Datepicker from "@/components/Datepicker";
import AddMultipleDw from "./AddMultipleDw.vue";
import AnalogSourceList from "./AnalogSourceList.vue";
import { setFeed, editFeed } from "@/api/siddhi";
import { mergeSourcesForm } from "../js/index";
import _ from "lodash";
export default {
  components: {
    Datepicker,
    AddMultipleDw,
    AnalogSourceList,
  },
  props: {
    isEditAdd: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      btnLoading: false,
      simulationType: "",
      index: null,
      drawer: false,
      rules: {
        simulationName: [{ required: true, message: "请输入模拟名称" }],
        timeInterval: [{ required: true, message: "请输入时间间隔" }],
        // noOfEvents: [{ required: true, message: "请输入事件编号" }],
      },
      isTime: false,
      AnalogSourceObj: [],
      form: {
        simulationName: "",
        startTimestamp: "",
        noOfEvents: "",
        description: "",
        timeInterval: "",
        endTimestamp: "",
      },
    };
  },
  computed: {
    // 开始结束时间戳或者事件编号有值的话,打开高级配置
    isTimeEmpty: {
      get() {
        return !!(
          this.form.startTimestamp ||
          this.form.endTimestamp ||
          this.form.noOfEvents
        );
      },
      set(val) {},
    },
  },
  mounted() {
    this.isTime = !!(
      this.form.startTimestamp ||
      this.form.endTimestamp ||
      this.form.noOfEvents
    );
  },
  methods: {
    handleDelSiddhiType(form) {
      const index = this.AnalogSourceObj.findIndex(
        (item) =>
          item.siddhiAppName == form.siddhiAppName &&
          item.simulationType == form.simulationType
      );
      console.log(index, "删除指定类型");
      if (index !== -1) {
        this.handleStrDel({}, index);
      }
    },
    handleStrDel(row, index) {
      this.AnalogSourceObj.splice(index, 1);
    },
    showTimeEmpty() {
      console.log(this.isTime);
      this.isTime = !this.isTime;
    },
    // 编辑模拟器
    handleStrEdit(item, index) {
      console.log(index, "index");
      this.index = index;
      this.$nextTick(() => {
        this.drawer = true;

        const cloneItem = _.cloneDeep(item);
        // 在组件内部赋值
        this.$refs.AddMultipleDw.setForm(cloneItem);
        this.$forceUpdate();
      });
    },
    // 提交
    handleSub() {
      this.$refs["formName"].validate((valid) => {
        if (valid) {
          if (this.AnalogSourceObj.length == 0) {
            this.$msg("请添加多例模拟器");
            return;
          }
          const form = {
            properties: this.form,
            sources: mergeSourcesForm(this.AnalogSourceObj), //转换成提交的数据
          };
          console.log(form, "最终提交的表单");
          this.btnLoading = true;
          if (this.isEditAdd) {
            editFeed(form)
              .then((res) => {
                this.$emit("handleSub");
                console.log(res, "编辑", form);
              })
              .finally((f) => {
                this.btnLoading = false;
              });
          } else {
            setFeed(form)
              .then((res) => {
                this.$emit("handleSub");
                console.log(res, "提交", form);
              })
              .finally((f) => {
                this.btnLoading = false;
              });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 删除
    handleDel(siddhiAppName) {
      this.drawer = false;
      this.AnalogSourceObj = this.AnalogSourceObj.filter((item) => {
        return item.siddhiAppName != siddhiAppName;
      });
    },
    // 添加模拟器的确认
    onSubmit(form) {
      this.drawer = false;
      let newform = _.cloneDeep(form);
      this.simulationType = newform.simulationType;
      // 随机的->attributeConfList是多个的,数据库的是单个的
      if (newform.simulationType == "DATABASE_SIMULATION") {
        // 流名称 在组件内部是 name
        // newform.name = newform.streamName;
        // newform.attributeConfList = [newform];
      }
      //当前siddhi存在就覆盖不存在添加 (名称和类型相同)
      const index = this.AnalogSourceObj.findIndex(
        (item) =>
          item.siddhiAppName == newform.siddhiAppName &&
          item.simulationType == newform.simulationType
      );
      if (index === -1) {
        this.AnalogSourceObj.push(newform);
      } else {
        // 此种赋值,vue无法检测更新
        // this.AnalogSourceObj[this.index] = newform;
        this.$set(this.AnalogSourceObj, index, newform);
      }
      console.log(index, "form :>> ", newform, "列表==>", this.AnalogSourceObj);
      this.$forceUpdate();
    },
    // 关闭
    handleClose() {
      this.drawer = false;
    },
    // 添加模拟源
    handleAnalogSource() {
      this.drawer = true;
      this.index = null;
    },
    picked() {},
  },
};
</script>

<style scoped lang='scss'>
.mu_box {
  height: calc(100vh - 160px);

  overflow: auto;
  /deep/ .el-form-item {
    margin-bottom: 10px;
  }
  .add_simulation {
    height: 47px;
    background-color: #e6f7ff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-top: 64px;

    div {
      color: #2680d2;
      font-size: 14px;
      margin-left: 3px;
      &:first-child {
        margin-left: 0;
        font-size: 15px;
      }
    }
  }
  .btns {
    display: flex;
    justify-content: flex-end;
    /* padding: 0 30px; */
    position: absolute;
    bottom: 30px;
    right: 20px;
    width: 100%;
  }
  .multiple_form {
    padding: 0 20px;
    border-bottom: 1px solid #e4e4e4;
    .time_stamp_show {
      background-color: #f9f9f9;
      padding: 10px;
      padding-top: 0;
      .data_picker {
        display: flex;
        align-items: center;
        .line {
          margin: 0 10px;
          background-color: #dcdfe6;
          width: 12px;
          height: 1px;
        }
      }
    }

    .time_title_arr {
      cursor: pointer;
      display: flex;
      align-items: center;
    }
    /deep/ .el-form-item__label {
      padding-bottom: 0;
      width: 100%;
    }
  }
}
</style>